<template>
    <div id="bigDiv">
        <head-2 />
        <div id="bigTitle">数独</div>
        <div id="contentDiv">
            <div id="waikuang">
                <div class="kuang" v-for="index in 16" :key="index"></div>
            </div>
            <div class="bigbtn">
                <div class="btn">1</div>
                <div class="btn">2</div>
                <div class="btn">3</div>
                <div class="btn">4</div>
                <div class="btn">清除</div>
                <div class="btn">无解</div>
            </div>
        </div>
        <div id="GameOver" v-if="isEnd">
            <div id="endTittle">游戏结束</div>
            <div>
                <img src="https://pic2.imgdb.cn/item/644a7a5e0d2dde5777f7ad27.jpg" alt="" />
                <p>{{ res }}</p>
            </div>
            <div id="btn">
                <el-button type="success" size="small" @click="onceAgain">再来一次</el-button>
                <el-button type="success" size="small" @click="goBack">返回首页</el-button>
                <el-button type="success" size="small" @click="lookEnd">查看结果</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import head2 from '@/components/Head/head2.vue'
export default {
    components: { head2 },
    data() {
        return {
            countDwon: 10,
            isEnd:false,
        }
    },
    mounted() {
        //   this.contDwon()
        this.getSudu()
    },
    methods: {
        onceAgain(){
            this.isEnd=!this.isEnd
            this.getSudu()
        },
        goBack(){
            this.$router.push("/home")
        },
        lookEnd(){
            this.isEnd=!this.isEnd
        },
        getSudu() {
            var arrbtn = document.getElementsByClassName("btn");
            var arrKuang = document.getElementsByClassName("kuang")//每一个数独方块
            var arrkuang1 = Array.from(arrKuang)
            var arrPlace = [];//随机地址
            var count = 0;
            var row1 = [];
            var row2 = [];
            var row3 = [];
            var row4 = [];
            var tongGuo = document.getElementById("pass")//获取通过界面
            while (1) {//随机循环生成数
                var rodomPlace = Math.floor(Math.random() * 16)
                var rodomSinger = Math.ceil(Math.random() * 4)
                if (arrPlace.indexOf(rodomPlace) == -1) {
                    if (rodomPlace % 4 == 0) {
                        if (row4.indexOf(rodomSinger) == -1) {
                            if (rodomSinger != arrKuang[rodomPlace + 1].innerHTML && rodomSinger != arrKuang[rodomPlace + 2].innerHTML && rodomSinger != arrKuang[rodomPlace + 3].innerHTML) {
                                if (rodomPlace == 0) {
                                    if (rodomSinger != arrKuang[rodomPlace + 5].innerHTML && rodomSinger != arrKuang[rodomPlace + 10].innerHTML && rodomSinger != arrKuang[rodomPlace + 15].innerHTML) {
                                        count++;
                                        arrPlace.push(rodomPlace)
                                        row4.push(rodomSinger);
                                        arrKuang[rodomPlace].innerHTML = rodomSinger;
                                    }
                                    else if (rodomPlace == 12) {
                                        if (rodomSinger != arrKuang[rodomPlace - 3].innerHTML && rodomSinger != arrKuang[rodomPlace - 6].innerHTML && rodomSinger != arrKuang[rodomPlace - 9].innerHTML) {
                                            count++;
                                            arrPlace.push(rodomPlace)
                                            row4.push(rodomSinger);
                                            arrKuang[rodomPlace].innerHTML = rodomSinger;
                                        }
                                    }
                                }
                                else {
                                    count++;
                                    arrPlace.push(rodomPlace)
                                    row4.push(rodomSinger);
                                    arrKuang[rodomPlace].innerHTML = rodomSinger;
                                }
                            }
                        }
                    }
                    if (rodomPlace % 4 == 1) {
                        if (row1.indexOf(rodomSinger) == -1) {
                            if (rodomSinger != arrKuang[rodomPlace + 1].innerHTML && rodomSinger != arrKuang[rodomPlace + 2].innerHTML && rodomSinger != arrKuang[rodomPlace - 1].innerHTML) {
                                if (rodomPlace == 9) {
                                    if (rodomSinger != arrKuang[rodomPlace + 3].innerHTML && rodomSinger != arrKuang[rodomPlace - 3].innerHTML && rodomSinger != arrKuang[rodomPlace - 6].innerHTML) {
                                        count++;
                                        arrPlace.push(rodomPlace)
                                        row1.push(rodomSinger);
                                        arrKuang[rodomPlace].innerHTML = rodomSinger;
                                    }
                                }
                                else if (rodomPlace == 5) {
                                    if (rodomSinger != arrKuang[rodomPlace - 5].innerHTML && rodomSinger != arrKuang[rodomPlace + 5].innerHTML && rodomSinger != arrKuang[rodomPlace + 10].innerHTML) {
                                        count++;
                                        arrPlace.push(rodomPlace)
                                        row1.push(rodomSinger);
                                        arrKuang[rodomPlace].innerHTML = rodomSinger;
                                    }
                                }
                                else {
                                    count++;
                                    arrPlace.push(rodomPlace)
                                    row1.push(rodomSinger);
                                    arrKuang[rodomPlace].innerHTML = rodomSinger;
                                }
                            }
                        }
                    }
                    if (rodomPlace % 4 == 2) {
                        if (rodomSinger != arrKuang[rodomPlace + 1].innerHTML && rodomSinger != arrKuang[rodomPlace - 2].innerHTML && rodomSinger != arrKuang[rodomPlace - 1].innerHTML) {
                            if (row2.indexOf(rodomSinger) == -1) {
                                if (rodomPlace == 6) {
                                    if (rodomSinger != arrKuang[rodomPlace - 3].innerHTML && rodomSinger != arrKuang[rodomPlace + 3].innerHTML && rodomSinger != arrKuang[rodomPlace + 6].innerHTML) {
                                        count++;
                                        arrPlace.push(rodomPlace)
                                        row2.push(rodomSinger);
                                        arrKuang[rodomPlace].innerHTML = rodomSinger;
                                    }
                                }
                                else if (rodomPlace == 10) {
                                    if (rodomSinger != arrKuang[rodomPlace - 5].innerHTML && rodomSinger != arrKuang[rodomPlace - 10].innerHTML && rodomSinger != arrKuang[rodomPlace + 5].innerHTML) {
                                        count++;
                                        arrPlace.push(rodomPlace)
                                        row2.push(rodomSinger);
                                        arrKuang[rodomPlace].innerHTML = rodomSinger;
                                    }
                                }
                                else {
                                    count++;
                                    arrPlace.push(rodomPlace)
                                    row2.push(rodomSinger);
                                    arrKuang[rodomPlace].innerHTML = rodomSinger;
                                }

                            }
                        }
                    }
                    if (rodomPlace % 4 == 3) {
                        if (row3.indexOf(rodomSinger) == -1) {
                            if (rodomSinger != arrKuang[rodomPlace - 1].innerHTML && rodomSinger != arrKuang[rodomPlace - 2].innerHTML && rodomSinger != arrKuang[rodomPlace - 3].innerHTML) {
                                if (rodomPlace == 3) {
                                    if (rodomSinger != arrKuang[rodomPlace + 3].innerHTML && rodomSinger != arrKuang[rodomPlace + 6].innerHTML && rodomSinger != arrKuang[rodomPlace + 9].innerHTML) {
                                        count++;
                                        arrPlace.push(rodomPlace)
                                        row3.push(rodomSinger);
                                        arrKuang[rodomPlace].innerHTML = rodomSinger;
                                    }
                                }
                                else if (rodomPlace == 15) {
                                    if (rodomSinger != arrKuang[rodomPlace - 5].innerHTML && rodomSinger != arrKuang[rodomPlace - 10].innerHTML && rodomSinger != arrKuang[rodomPlace - 15].innerHTML) {
                                        count++;
                                        arrPlace.push(rodomPlace)
                                        row3.push(rodomSinger);
                                        arrKuang[rodomPlace].innerHTML = rodomSinger;
                                    }
                                }
                                else {
                                    count++;
                                    arrPlace.push(rodomPlace)
                                    row3.push(rodomSinger);
                                    arrKuang[rodomPlace].innerHTML = rodomSinger;
                                }
                            }
                        }
                    }
                }
                if (count > 3) {
                    break;
                }
            }
            for (var i = 0; i < arrKuang.length; i++) {//点击替换答案内容
                if (!arrKuang[i].innerHTML) {
                    arrKuang[i].onclick = function (el) {
                        arrkuang1.forEach(element => {
                            element.style.backgroundColor = "rgb(134, 214, 134)"
                        });
                        this.style.backgroundColor = "red";
                        this.style.color = "yellow"
                        for (let j = 0; j < arrbtn.length - 1; j++) {
                            arrbtn[j].onclick = function () {
                                if (j == 4) {
                                    el.target.innerHTML = null;
                                }
                                else {
                                    el.target.innerHTML = this.innerHTML
                                }
                            }
                        }
                    }
                }
            }
            var f = setInterval(function () {
                var newarr1 = arrkuang1.slice(0, 4).reduce((a, b) => a + b.innerHTML * 1, 0)
                var newarr2 = arrkuang1.slice(4, 8).reduce((a, b) => a + b.innerHTML * 1, 0)
                var newarr4 = arrkuang1.slice(8, 12).reduce((a, b) => a + b.innerHTML * 1, 0)
                var newarr5 = arrkuang1.slice(12, 16).reduce((a, b) => a + b.innerHTML * 1, 0)
                // console.log(arrKuang1)
                var newarr6 = arrkuang1[0].innerHTML * 1 + arrkuang1[4].innerHTML * 1 + arrkuang1[8].innerHTML * 1 + arrkuang1[12].innerHTML * 1
                var newarr7 = arrkuang1[1].innerHTML * 1 + arrkuang1[5].innerHTML * 1 + arrkuang1[9].innerHTML * 1 + arrkuang1[13].innerHTML * 1
                var newarr8 = arrkuang1[2].innerHTML * 1 + arrkuang1[6].innerHTML * 1 + arrkuang1[10].innerHTML * 1 + arrkuang1[14].innerHTML * 1
                var newarr9 = arrkuang1[3].innerHTML * 1 + arrkuang1[7].innerHTML * 1 + arrkuang1[11].innerHTML * 1 + arrkuang1[15].innerHTML * 1

                if (newarr1 == 10 && newarr2 == 10 && newarr4 == 10 && newarr5 == 10) {
                    if (newarr6 == 10 && newarr7 == 10 && newarr8 == 10 && newarr9 == 10) {
                        tongGuo.style.display = "block"
                        clearInterval(f)
                    }

                }
            }, 2000)

        }
    }
}
</script>
  
<style lang="less">
#GameOver {
    width: 90vw;
    height: 65vh;
    background-color: rgb(165, 167, 165);
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    #endTittle {
        margin-top: 20px;
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: bold;
    }
    p {
        font-size: 18px;
        color: red;
        font-weight: bold;
        margin-bottom: 5vh;
        letter-spacing: 2px;
    }
    img {
        margin: 6vh auto 1vh;
        width: 90%;
        height: 30vh;
        object-fit: cover;
    }
    #btn {
        display: flex;
        justify-content: space-evenly;
        bottom: 0;
    }
}
#waikuang {
    height: 63vh;
    width: 95vw;
    background-color: rgb(134, 214, 134);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid black;
    box-shadow: 1px 1px 5px black;
}

.kuang {
    width: 23.3vw;
    height: 15.4vh;
    border: 1px solid white;
    text-align: center;
    font-size: 20px;
    line-height: 17vh;
    
}

.bigbtn {
    height: 10vh;
    width: 95vw;
    margin: 0 auto;
    background-color: rgb(220, 64, 235);
    color: white;
    display: flex;
    border: 1px solid black;
}

.btn {
    height: 10vh;
    flex: 1;
    text-align: center;
    font-size: 20px;
    line-height: 10vh;
    border: 1px white solid;
    margin-bottom: -1px;
}

#bigDiv {
    height: 100vh;

    #countDown {
        font-size: 18px;
        font-weight: bold;
        margin-top: 30px;
        letter-spacing: 2px;

        #timeNumber {
            color: red;
        }
    }

    #bigTitle {
        font-weight: bold;
        font-size: 22px;
        margin-top: 5px;
        margin-bottom: 5px;
        letter-spacing: 3px;
    }

}
</style>